<template>
<div class="cont" v-if="jsonData && index">
  <el-row>
    <el-col :span="24">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{jsonData.fbName[index]}}</span>
          <a :href="'https://70.wowfan.net/?zone=' + jsonData.fbDetail[index].id" target="_blank" title="在数据库中查看副本信息" class="iconfont">&#xe6ab;</a>
        </div>
        <div class="text item">
          <span class="label">对应声望</span>
          <el-popover ref="poprep" placement="top-start" width="100" trigger="hover" content="to be continued"></el-popover>
          <a v-popover:poprep class="repTxt">{{jsonData.fbDetail[index].rep}}</a>
        </div>
        <div class="text item">
          <span class="label">普通难度</span>
          <el-collapse @change="handleCollapseChange" class="step" value="1">
            <el-collapse-item title="进本条件" name="1">
              <div class="collapseDiv" v-for="(require1item, require1index) in jsonData.fbDetail[index].require1" :key="'require1item'+require1index" v-html="'· '+require1item">
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div v-if="index.split('-')[0] == 'fb1'" class="text item">
          <span class="label">英雄难度</span>
          <el-collapse @change="handleCollapseChange" class="step" value="1">
            <el-collapse-item v-if="jsonData.fbDetail[index].repNpc" title="要求声望" name="1">
              <!-- <el-popover ref="poprepnpc" placement="top-start" width="200" trigger="hover" :content="jsonData.fbDetail[index].repNpc"></el-popover> v-popover:poprepnpc -->
              <el-dialog title="军需官位置" :visible.sync="poprepnpc">
                <div class="text">{{jsonData.fbDetail[index].repNpc}}</div>
                <img v-if="jsonData.fbDetail[index].rep == '荣耀堡/萨尔玛'" src="../assets/repnpc/荣耀堡.jpg" class="repmap">
                <img v-if="jsonData.fbDetail[index].rep == '荣耀堡/萨尔玛'" src="../assets/repnpc/萨尔玛.jpg" class="repmap">
                <img v-if="jsonData.fbDetail[index].rep == '贫民窟'" src="../assets/repnpc/贫民窟.jpg" class="repmap">
                <img v-if="jsonData.fbDetail[index].rep == '塞纳里奥远征队'" src="../assets/repnpc/塞纳里奥远征队.jpg" class="repmap">
                <img v-if="jsonData.fbDetail[index].rep == '沙塔尔'" src="../assets/repnpc/沙塔尔.jpg" class="repmap">
                <img v-if="jsonData.fbDetail[index].rep == '时光守护者'" src="../assets/repnpc/时光守护者.jpg" class="repmap">
              </el-dialog>
              <div class="collapseDiv">· <b>{{jsonData.fbDetail[index].rep}}</b>声望崇敬（PTR2.4前）/尊敬（PTR2.4）后<a href="JavaScript:;" @click="poprepnpc = true" >军需官</a>处购买钥匙</div>
            </el-collapse-item>
            <el-collapse-item v-if="jsonData.fbDetail[index].require2 && jsonData.fbDetail[index].require2.length>0" title="其它" name="2">
              <div class="collapseDiv" v-for="(require2item, require2index) in jsonData.fbDetail[index].require2" :key="'require2item'+require2index" v-html="'· '+require2item">
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
let Datas = require('../assets/datas.json')
export default {
  name: 'fbPage',
  props: {
    index: String
  },
  data() {
    return {
      jsonData: null,
      poprepnpc: false
    }
  },
  mounted() {
    this.jsonData = Datas
  },
  methods: {
    getFbDataByIndex(index) {
      console.log(index)
    },
    handleCollapseChange(val) {
      console.log(val)
    }
  }
}
</script>
<style scoped>
.cont {
  color: #fff;
  font-size: 18px;
}

.box-card {}
.box-card .text {
  font-size: 14px;display: block;min-height: 48px;line-height: 48px;
}
.box-card .label {
  color: #709a41;
  display: inline-block;
  margin-right: 20px;
}
.box-card .repTxt:hover{color: var(--LINKCOLOR);cursor: pointer;}
.step{width: 400px;}
.collapseDiv{min-height: 30px;line-height: 28px;}
.repmap{width: 100%;}
.iconfont{margin-left: 5px;}
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{    box-shadow: 0 2px 12px 0 rgb(5 60 90);}
</style>
<style>
.cont .el-collapse-item__content{padding-bottom: 0;}
</style>
